<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="../../../resource/css/niubility.css"/>
	<script src="../../../resource/js/static_url.js"></script>
	<script type="text/css">
		/* 设置饼状图，柱状图，居中 */
		/*.pie_zhu{
			width: 1000px;
			position: relative;
			left: 50%;
			margin-left: -500px;
			border: 1px solid red;
			!* 观察线*!
		}*/
	</script>
</head>
<body>
	  <div id="pie" style="height:300px;" class="pie_zhu"> </div>
	  <div id="zhu" style="height:250px;" class="pie_zhu"></div>
	  <script  src="../../../resource/js/echarts.common.min.js"></script>
	  <script type="text/javascript" src="../../../resource/js/jquery.min.js"></script>
	  <script type="text/javascript">


	  	//ajax这方面的请求
        $.ajax({
        	type:"get",
        	url: admin_charts,
        	async:true,
        	dataType:"json",
        	success:function(info){  
        		var infoData = info.data; //这个对象下面有 histogram，pieChart      		
        		var bar = infoData.histogram;
        		var pie = infoData.pieChart;
        		var arrName = [];
        		var arrValue = [];
        		
        		
        		$.each(bar, function(index,value) {
        			arrName.push(value.name);
        			arrValue.push(value.value);
        		});
        		//将这个数组，传给“ 饼状图 ”
        		pieOption(pie);
        		//将数据传给柱状图，并调用该函数
        		barOption(arrName,arrValue);
        	},
        	error:function(){
        		console.log('ajax请求失败');
        	}
        });
        
        //---------饼状图函数
	  	function pieOption(pie){
		  	var bing = echarts.init(document.getElementById('pie'));
		  	var optionPie = {
		  		title: {
	                    text: '在用设备分析图',//标题文本内容
	                    textStyle: {//设置标题的文本样式
	                       // color: 'black'
	                    }
	                },
		  		visualMap: {
	                    // 不显示 visualMap 组件，只用于明暗度的映射
	                    show: false,
	                    // 映射的最小值为 80
	                    min: 80,
	                    // 映射的最大值为 600
	                    max: 600,
	                    inRange: { // 明暗度的范围是 0 到 1
	                    	colorLightness: [0, 1]
	                    }
	               },             
				//tooltip这个对象能，产生鼠标移动提示数据的功能
				tooltip : {
	            	trigger: 'item',
	            	formatter: "{a} <br/>{b} : {d}%"
	        	},
			    series :
			    [
			        {
				        name:'设备分布',
		                type:'pie',
		                clockwise:'true',
		                startAngle:'0',
		                radius : '60%',
		                center: ['50%', '50%'],
			            data:pie
			           
//				              [   {value:235, name:'视频广告'},
//				                {value:274, name:'联盟广告'},
//				                {value:310, name:'邮件营销'},
//				                {value:335, name:'直接访问'},
//				                {value:400, name:'搜索引擎'},
//				                {value:500,name:'哈哈'}  ]
			            
			        }
			    ]
			};
			bing.setOption(optionPie);  
	  	}
	  	
	  	
	  	//-----------柱状图
	  	function barOption(arrName,arrValue){
	  		// 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('zhu'));
	        // 指定图表的配置项和数据
	        var option = {
	            title: {
	                text: '设备类别分析图'
	            },
	            tooltip: {},
	            legend: {
	                data:['数量']
	            },
	            xAxis: {	            	
	                data: arrName        	
	            },
	            yAxis: {},
	            series: [{
	                name: '设备数据',
	                type: 'bar',
	                data: arrValue  
	            }]
	        };
	        // 使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option);          
	  	}
	  	     
	  </script>
</body>
</html>
